<template>
	<view class="bg" style="width: 100%;height: auto;background-color: rgb(247,247,247)">
		<view class="header">
			<view class="search">
				<easy-select ref="easySelect" size="mini" value="全部区域" :value="selecValue" @selectOne="selectOne" ></easy-select>
				<u-search shape="round" clearabled="true" :showAction="false" placeholder="请输入注册代码/注册地址"></u-search>
				<button>搜索</button>
			</view>
		</view>
			
			<view class="container">
				<view class="content" @click="details">
					<image src="../../static/dt_logo.png"></image>
					<view class="content_text">
						<view class="text_top">
							<text class="place">迅驰大厦</text>
							<text class="address">金牛区 抚琴街道营门口路45号</text>
						</view>
						<view class="text_bottom">
							<text class="dt_num">电梯救援编号：687633</text>
							<text class="time">2021-12-12 1天后</text>
						</view>	
					</view>
				</view>
				<view class="content" @click="details">
					<image src="../../static/dt_logo.png"></image>
					<view class="content_text">
						<view class="text_top">
							
							<text class="place">迅驰大厦</text>
							<text class="address">金牛区 抚琴街道营门口路45号</text>
						</view>
						<view class="text_bottom">
							<text class="dt_num">电梯救援编号：687633</text>
							<text class="time">2021-12-12 1天后</text>
						</view>	
					</view>
				</view>
				<view class="content" @click="details">
					<image src="../../static/dt_logo.png"></image>
					<view class="content_text">
						<view class="text_top">
							<text class="place">迅驰大厦</text>
							<text class="address">金牛区 抚琴街道营门口路45号</text>
						</view>
						<view class="text_bottom">
							<text class="dt_num">电梯救援编号：687633</text>
							<text class="time">2021-12-12 1天后</text>
						</view>	
					</view>
				</view>
				<view class="content" @click="details">
					<image src="../../static/dt_logo.png"></image>
					<view class="content_text">
						<view class="text_top">
							<text class="place">迅驰大厦</text>
							<text class="address">金牛区 抚琴街道营门口路45号</text>
						</view>
						<view class="text_bottom">
							<text class="dt_num">电梯救援编号：687633</text>
							<text class="time">2021-12-12 1天后</text>
						</view>	
					</view>
				</view>
				<view class="content" @click="details">
					<image src="../../static/dt_logo.png"></image>
					<view class="content_text">
						<view class="text_top">
							<text class="place">迅驰大厦</text>
							<text class="address">金牛区 抚琴街道营门口路45号</text>
						</view>
						<view class="text_bottom">
							<text class="dt_num">电梯救援编号：687633</text>
							<text class="time">2021-12-12 1天后</text>
						</view>	
					</view>
				</view>
				<view class="content" @click="details">
					<image src="../../static/dt_logo.png"></image>
					<view class="content_text">
						
						<view class="text_top">
							<text class="place">迅驰大厦</text>
							<text class="address">金牛区 抚琴街道营门口路45号</text>
						</view>
						<view class="text_bottom">
							<text class="dt_num">电梯救援编号：687633</text>
							<text class="time">2021-12-12 1天后</text>
						</view>	
					</view>
				</view>
			</view>
			
		
	</view>
</template>

<script>
	export default{
		methods:{
			details(){
				uni.navigateTo({
					url:'dt_message'
				})
			},
			selectOne(options) {
			            this.selecValue = options.label
			        },
			        useOutClickSide() {
			            this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			        }
		}
	}
</script>

<style lang="scss">
	.header {
		width: 100%;
		height: 50px;
		padding: 10px 0;
		.search {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: auto;
			align-items: center;
			width: 90%;
			height: 50px;
			text{
				font-size: 14px;
			}
			uni-search-bar {
				position: relative;
				border: 1px solid #CCCCCC;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				width: 40%;
				border-radius:20px ;	
			}

			button {
				position: absolute;
				background-color: #6a68c9;
				height: 60rpx;
				line-height: 60rpx;
				width: 110rpx;
				font-size: 24rpx;
				border: 0;
				color: #FFFFFF;
				border-radius:50rpx ;
				text-align: center;
				margin-left: 550rpx;
				align-items: center;
			}

			text {
				vertical-align: middle;
			}
		}
	}
.container{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	
	
}
	.content {
		display: flex;
		flex-direction: row;
		align-content: space-between;
		margin: auto;
		margin: 10rpx auto;
		height: 242rpx;
		width: 90%;
		border-radius: 5px;
		box-shadow: 1px #C0C0C0;
		background-color: #FFFFFF;
		.text_top{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 50%;
			border-bottom:1px solid #747474 ;
		}
		.text_bottom{
			display: flex;
			flex-direction: column;
			height: 50%;
		}
		image {
			width: 80px;
			height: 80px;
			padding: 10px;
		}

		.content_text {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 452rpx;
			margin: 20rpx 20rpx;
		}
		text{
			margin: 5px 10px;
		}
		.place{
			font-size: 27rpx;
			color: #000000;
		}
		.address{
			font-size: 21rpx;
			color: #747474;
		}
		.dt_num{
			font-size: 18rpx;
			color: #747474;
		}
		.time{
			font-size: 19rpx;
			color: #747474;
		}
	}
</style>
